<template>
  <div class="container">
    <view class="bgImage">
      <image :src="counter.slParams.userInfo.logo" mode="aspectFill" class="logo" />
      <view class="navBar flex alignCenter justifyFlexEnd" :style="{top: `${counter.statusBarHeight+10}px`,right: `${iconStyle()}px`}">
        <view class="model">模式切换</view>
        <uv-icon name="setting-fill" color="#BCBBBB" @click="proxy.$utils.toLink('/packagePages/my/setting')"></uv-icon>
      </view>

      <view class="content" :style="contentStyle">
        <view class="userInfo flex justifyBetween alignCenter">
          <view class="left flex alignCenter">
            <uv-avatar @click="proxy.$utils.toLink('/packagePages/my/editInfo')" :src="counter.slParams.userInfo.logo" mode="aspectFill" size="80"></uv-avatar>
            <view class="info">
              <view class="name bold">{{info.username}}</view>
              <view style="display:inline-block">
                <view class="tag fz12 flex alignCenter" @click="proxy.$utils.toLink(`/packagePages/my/statusSelection?status=${info.loveStatus}`)">
                  <uv-image v-if="info.loveStatus==1" src="https://oss.seenlove.com/images/6ee71492c886876a21229d4070cd152e.png" width="18px" height="17px"></uv-image>
                  <uv-image v-else src="https://oss.seenlove.com/images/cd6d8baa74b281f4562d56b8a3f31c4d.png" width="18px" height="17px"></uv-image>
                  {{info.loveStatus==1?'社交多样化':"情侣档"}}
                </view>
              </view>
            </view>
          </view>
          <view class="bag">
            <uv-icon name="bag" color="#494747" size="22"></uv-icon>
          </view>
        </view>

        <view class="grids textCenter tiezi">
          <view class="item">
            <view class="num">{{info.dynamicCount}}</view>
            <view class="text">帖子</view>
          </view>
          <view class="item">
            <view class="num">{{info.followCount}}</view>
            <view class="text">点赞</view>
          </view>
          <view class="item">
            <view class="num">{{info.fansCount}}</view>
            <view class="text">粉丝</view>
          </view>
          <view class="item">
            <view class="num">{{info.visitorCount }}</view>
            <view class="text">访客</view>
          </view>
        </view>
      </view>
    </view>

    <view @click="proxy.$utils.toLink('/packagePages/my/viper')" class="viper flex justifyBetween alignCenter" id="viper" :style="viperStype">
      <view class="left">
        <view class="bold title">{{info.isVip==1?'已':null}}开通VIP会员</view>
        <view class="desc fz12">享受高达6项权益 充值更有优惠</view>
      </view>
      <uv-button text="查看详情" color="#F55FA1" shape="circle" v-if="info.isVip==1"></uv-button>
      <uv-button text="去开通" color="#F55FA1" shape="circle" v-else></uv-button>
    </view>

    <!-- 订单 -->
    <view class="order wrap">
      <view class="flex justifyBetween justifyBetween">
        <view class="title bold">订单中心</view>
        <view class="flex alignCenter fz12">查看全部
          <uv-icon name="arrow-right" size="12"></uv-icon>
        </view>
      </view>

      <view class="order-bd">
        <block v-for="(item,index) in orderMenu" :key="index">
          <navigator class="order-item" hover-class="none" :url="item.url">
            <view class="pic">
              <image :src="item.img" mode="aspectFill"></image>
              <text class="order-status-num" v-if="item.num > 0">{{ item.num }}</text>
            </view>
            <view class="txt">{{item.title}}</view>
          </navigator>
        </block>
      </view>
    </view>

    <uv-tabs :list="tabs" :current="current" @click="tabsClick" lineColor="#2F3133"></uv-tabs>
    <view class="wrap">
      <baseInfo v-if="current == 0"></baseInfo>
      <dynamicCom ref="dynamicRef" v-else-if="current == 1"></dynamicCom>
    </view>

    <uv-back-top :scroll-top="scrollTop"></uv-back-top>
  </div>
</template>

<script setup lang="ts">
import dynamicCom from "@/pages/tabbar/tabbar-5/components/dynamicCom.vue";
import baseInfo from "@/pages/tabbar/tabbar-5/components/baseInfo.vue";
import useCounterStore from "@/stores/counter";
const counter = useCounterStore();
const { proxy } = getCurrentInstance();
const instance = getCurrentInstance();

let viperStype = ref(null);
let contentStyle = ref(null);
let tabs = ref([{ name: "资料" }, { name: "动态" }, { name: "活动" }]);
let current = ref(0);
let scrollTop = ref(0);
let info = ref({});
let orderMenu = ref([
  {
    img: "https://meet-city.oss-cn-beijing.aliyuncs.com/images/2024/08/31/17250693957837256.png",
    title: "待付款",
    url: "/pages/users/order_list/index?status=0",
    num: 0,
  },
  {
    img: "https://meet-city.oss-cn-beijing.aliyuncs.com/images/2024/08/31/17250694099688441.png",
    title: "待发货",
    url: "/pages/users/order_list/index?status=1",
    num: 0,
  },
  {
    img: "https://meet-city.oss-cn-beijing.aliyuncs.com/images/2024/08/31/17250694197865592.png",
    title: "待收货",
    url: "/pages/users/order_list/index?status=2",
    num: 0,
  },
  {
    img: "https://meet-city.oss-cn-beijing.aliyuncs.com/images/2024/08/31/17250694282432709.png",
    title: "待评价",
    url: "/pages/users/order_list/index?status=3",
    num: 0,
  },
  {
    img: "https://meet-city.oss-cn-beijing.aliyuncs.com/images/2024/08/31/17250694394037901.png",
    title: "售后/退款",
    url: "/pages/users/user_return_list/index",
    num: 0,
  },
]);

onShow(() => {
  uni.showTabBar();
  nextTick(() => {
    init();
  });
});

onPageScroll((e) => {
  scrollTop.value = e.scrollTop;
});

//加载更多
onReachBottom(() => {
  if (current.value == 1) instance.refs.dynamicRef.getMore();
});

function tabsClick(e) {
  current.value = e.index;
}

function iconStyle() {
  let right = 0;
  // #ifdef MP-WEIXIN
  let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
  right = menuButtonInfo.width;
  // #endif
  return right + 20;
}

async function init() {
  let viperHeight = await viewInfo("#viper", "height");
  viperStype.value = {
    marginTop: `-${Number(viperHeight) / 2}px`,
  };
  contentStyle.value = {
    bottom: `${Number(viperHeight) / 2 + 15}px`,
  };
  getInfo();
  //getMenuBanner();
}

async function getMenuBanner() {
  let resp = await proxy.$shopApis.menuUser();
  console.log("菜单banner", resp);
}

async function getInfo() {
  info.value = await proxy.$apis.queryInfoPlus();
  console.log("用户信息和统计数据", info.value);
}

//获取页面元素信息
function viewInfo(id, type) {
  return new Promise((resolve, reject) => {
    uni
      .createSelectorQuery()
      .in(instance)
      .select(id)
      .boundingClientRect((data) => {
        if (data) {
          resolve(data[type]);
        } else {
          resolve(0);
        }
      })
      .exec();
  });
}
</script>



<style lang="scss" scoped>
.container {
  .bgImage {
    position: relative;
    background-color: #000;
    height: 350px;
    .logo {
      display: block;
      width: 100%;
      height: 100%;
      opacity: 0.6;
      filter: alpha(opacity=60);
    }
    .navBar {
      position: absolute;
      right: 15px;
      .model {
        color: #f55fa1;
        font-size: 14px;
        background: white;
        padding: 2px 10px;
        border-radius: 6px;
        margin-right: 10px;
      }
    }
    .content {
      position: absolute;
      left: 0;
      right: 0;
      margin: auto;
      width: calc(100% - 30px);
      .tiezi {
        background-color: white;
        border-radius: 10px;
        padding: 8px 0;
        margin-top: 75px;
        .item {
          font-size: 14px;
        }
      }
      .userInfo {
        .left {
          .info {
            margin-left: 15px;
            .name {
              color: white;
              font-size: 25px;
              margin-bottom: 5px;
            }
            .tag {
              background-color: #8193aa;
              border-radius: 10px;
              font-size: 12px;
              padding: 3px 15px;
              margin-right: 5px;
              color: white;
            }
          }
        }
        .bag {
          background-color: #d9dada;
          padding: 3px 8px;
          border-radius: 15px;
        }
      }
    }
  }
  .viper {
    background-color: #ffecf9;
    width: calc(100% - 50px);
    margin: 0 auto 0;
    border-radius: 10px;
    padding: 10px;
    position: relative;
    z-index: 1;
    .title {
      color: #f55fa1;
    }
    .desc {
      color: #0f0f0f;
      margin-top: 2px;
    }
  }
  .wrap {
    padding: 15px;
  }
  .order-bd {
    display: flex;
    justify-content: space-between;
    padding: 15px 0 0;

    .order-item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .pic {
        position: relative;
        text-align: center;

        image {
          width: 48rpx !important;
          height: 48rpx;
          display: block;
          margin: auto;
        }
      }

      .txt {
        margin-top: 15rpx;
        font-size: 26rpx;
        color: #454545;
      }
    }
  }
}
</style>